<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.in.ordernumber')" :label-width="formLabelWidth">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordercode"></el-input>
          </el-form-item>
          <el-form-item label="SKU" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.sku"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.out.storeordercode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.storeordercode"></el-input>
          </el-form-item>
          <el-form-item label="SupplierCode" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.state')" :label-width="formLabelWidth">
            <el-select v-model="formInline.stateid" :placeholder="$t('m.choose')">
              <el-option v-for="item in states" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('m.out.ordertype')" :label-width="formLabelWidth">
            <el-select v-model="formInline.ordertype" :placeholder="$t('m.choose')">
              <el-option v-for="item in ordertype" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-table
      ref="table"
      :data="tableData"
      stripe
      empty-text
      fits
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange"
    >
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="ordercode" :label="$t('m.in.ordernumber')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-orderCode')">
            <el-button type="text" @click.stop="$router.push({ path: 'order/orderInfo', query: {orderid:scope.row.orderid}})">{{scope.row.ordercode}}</el-button>
          </template>
          <template v-else>{{scope.row.ordercode}}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="storeordercode" :label="$t('m.out.storeordercode')"></el-table-column>
      <el-table-column :label="$t('m.state')" width="100" align="center" prop="statetext">
        <!-- <template slot-scope="scope">{{scope.row.stateid|stateFilter(lan)}}</template> -->
      </el-table-column>
      <el-table-column :label="$t('m.out.ordertype')" align="center">
        <template slot-scope="scope">{{scope.row.ordertype==1?$t('m.out.ordertype1'):$t('m.out.ordertype2')}}</template>
      </el-table-column>
      <el-table-column align="center" prop="totalnumber" :label="$t('m.out.totalnumber')"></el-table-column>
      <el-table-column align="center" prop="payment" :label="$t('m.strategy.payment')">
        <template slot-scope="scope">
          <span v-if="scope.row.payment==1">{{$t('m.out.paytype1')}}</span>
          <span v-if="scope.row.payment==2">{{$t('m.out.paytype2')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="consignee" :label="$t('m.out.consignee')"></el-table-column>
      <el-table-column align="center" prop="contact" :label="$t('m.out.contact')"></el-table-column>
      <el-table-column align="center" prop="provincename" :label="$t('m.out.provincename')"></el-table-column>
      <el-table-column align="center" prop="cityname" :label="$t('m.out.cityname')"></el-table-column>
      <el-table-column align="center" prop="regionname" :label="$t('m.out.regionname')"></el-table-column>
      <el-table-column align="center" prop="shippingaddress" :label="$t('m.out.address')"></el-table-column>
    </el-table>
    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  data(){
    return {
      formInline:{
        ordercode:'',
        ordertype:'',
        sku:'',
        stateid:null,
        storeordercode:'',
        suppliercode:null
      },
      tableData:[],
      shop:[],
      warehouse:[],
      region:[],
      waveList:[],
      formLabelWidth:'100px',
      pickingForm:{
        wavetemplateid:'',
        pickingType:'',
        orderids:[]
      }
    }
  },
  filters:{
    // 1 待处理 2 待拣货 3 拣货中 4 已完成 5 已取消
    stateFilter(value, lan){
      return [
        lan('m.quality.state1'),
        lan('m.out.state2'),
        lan('m.out.state3'),
        lan('m.shelves.state5'),
        lan('m.shelves.state3')
      ][value - 1]
    }
  },
  computed:{
    states(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:10,
          label:this.$t('m.out.detailState2')
        },
        {
          id:20,
          label:this.$t('m.review.state3')
        }
      ]
    },
    ordertype(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:1,
          label:this.$t('m.out.ordertype1')
        },
        {
          id:2,
          label:this.$t('m.out.ordertype2')
        }
      ]
    },
    pickingtype(){
      return [
        {
          id:1,
          label:this.$t('m.out.pickingtype1')
        },
        {
          id:2,
          label:this.$t('m.out.pickingtype2')
        }
      ]
    }
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/saleorder/history',
        params:{
          page:this.page,
          rows:this.rowSize,
          ordercode:this.formInline.ordercode,
          ordertype:this.formInline.ordertype,
          sku:this.formInline.sku,
          stateid:this.formInline.stateid,
          storeordercode:this.formInline.storeordercode,
          suppliercode:this.formInline.suppliercode
        }
      }).then(({ data }) => {
        for (let i = 0;i < data.records.length;i++){
          data.records[
            i
          ].receivingdate = common.timestampToTime(
            data.records[i].receivingdate
          )
        }
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(() => this.tableLoading = false, 500)
      })
    },
    search(){
      this.page = 1
      this.init()
    },

    close(formName){
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
      this.init()
    },
    getShop(){
      this.$axios({
        method:'get',
        url:'/shopinfo/list'
      }).then(({ data }) => {
        this.shop = data
      })
    }
  },
  activated(){
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.el-form-item--mini span {
  font-size: 10px;
}
.el-select {
  width: 100%;
}
.el-table {
  overflow-y: scroll;
}
</style>